<template>
  <section class="login"  :style="{height:clientHeight+'px'}">
    <header-bar></header-bar>
    <aside class="main">
      <div class="login_main">
        <div class="top"><img src="../../assets/login_icon1.png"/></div>
        <div class="login_main2">
          <h3>绑定用户信息</h3>
          <aside class="login_contain">
            <ul>
              <li>
                <span class="icon icon_user"><img src="../../assets/login_user_icon.png"/></span>
                <input type="text" class="text" v-model.trim="username" placeholder="用户名" maxlength="20"/>
              </li>
              <li>
                <span class="icon icon_password"><img src="../../assets/login_password_icon.png"/></span>
                <input type="password" class="text" v-model.trim="password" placeholder="密码" maxlength="20"/>
              </li>
            </ul>
            <a href="javascript:void(0);" class="btn" @click="send()">绑定</a>
            <!--<router-link to="/myList" class="btn">登陆</router-link>-->
          </aside>
        </div>


      </div>
    </aside>
    <div class="footer">
      <footer-bar></footer-bar>
    </div>

  </section>
</template>

<script>
  import headerBar from "@/layout/header"
  import footerBar from "@/layout/footer"
  export default{
    components:{
      headerBar,
      footerBar
    },
    data(){
      return{
        username:'',
        password:'',
        clientHeight:window.innerWidth<959?window.innerHeight:"auto" ,
        clientWidth:window.innerWidth,
      }
    },
    created(){
      var _this=this;
      document.onkeydown=function(event){
        event=event || window.event;
        if(event.keyCode==13){
          _this.send();
        }
      }
    },
    mounted(){
      const that = this;
      window.onresize = () => {
        return (() => {
          that.clientWidth = window.innerWidth;
          if(that.clientWidth<959){
            that.clientHeight=window.innerHeight;
          }else{
            that.clientHeight="auto";
          }
        })()
      }
    },
    methods:{
      send(){
        //console.log(this.global.url)
        if(this.username==''){
          this.$layer.msg("用户名不能为空");
          return false;
        }
        else if(this.password==''){
          this.$layer.msg("密码不能为空");
          return false;
        }
       // alert(localStorage.getItem("openid"));
        this.$http.post(this.global.url+'/api/user/bindInfo ',{
          uname:this.username,
          passwd:this.password,
          openId:localStorage.getItem("openid"),
          headImg:localStorage.getItem("headImg")
        }).then(res=>{
          console.log(res)
          let data=res.data;
          if(data.code==0){
            localStorage.setItem('token',   data.data["token"]);
            localStorage.setItem('refleshToken',data.data["refleshToken"]);
            this.$store.commit('set_token', data.data["token"]);
            this.$store.commit('set_refleshToken', data.data["refleshToken"]);
            if (this.$store.state.token||localStorage.getItem("token")) {
              this.getUserInfor();//获取用户信息

            } else {
              this.$router.replace('/bindInfo');
            }
          }
          else{
            this.$layer.msg('账号或者密码不正确');
            /*this.$layer.msg(data.msg);*/
          }
        }).catch(error=>{
          console.log(error)
        })
      },
      getUserInfor(){
        this.$ajax.get(this.global.url+"/api/user/getUserInfo").then(res=>{
          //console.log(res)
          let result=res.data;
          if(result.code==200){
            let data=JSON.stringify(result.data);
            localStorage.setItem('userInfo',  data);
            sessionStorage.setItem('userInfo',data);
            //this.$router.push('/');//获取到用户信息才跳转到首页
            let redirect = decodeURIComponent(this.$route.query.redirect || '/');
            this.$router.push({ path: redirect });//登录成功后跳转路由
          }
          else{
            this.$router.replace('/login');
          }

        }).catch(error=>{
          console.log(error)
        })
      }
    }
  }
</script>

<style scoped>
  .login{
    width:100%;
    height: 100%;
    position: relative;
    /*min-height:600px;*/
    overflow-y: auto;
  }
  .main{
    position:absolute;
    top:4rem;
    left:0px;
    right:0px;
    bottom:0px;
    overflow: auto;
    background: url(../../assets/login_bj.jpg) no-repeat center top;
    background-size: cover;
  }
  .login_main{
    width: 80%;
    max-width: 700px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background: #fff;
  }
  .top{
    position: absolute;
    top:-2.8rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 5.4rem;
    height:5.4rem;
    line-height: 4.5rem;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
  }
  .top img{
    width: 33%;
    vertical-align: middle;
  }
  .login_main2{
    padding:3.8rem 5rem 4rem;
  }
  .login_main2 h3{
    font-size: 1.3rem;
    color:#333333;
    font-weight: bold;
    line-height: 1.6rem;
    text-align: center;
    margin-bottom: 2.3rem;
  }
  .login_contain li{
    width:100%;
    border:1px solid #e5e5e5;
    height:2.7rem;
    line-height: 2.7rem;
    margin-bottom: 10px;
    padding-left: 2.2rem;
    position:relative;
  }
  .login_contain li .icon{
    display: inline-block;
    width: 1rem;
    height:1rem;
    line-height: 1rem;
    position: absolute;
    top:0.7rem;
    left:1.1rem;
  }
  .login_contain li .icon img{
    max-width: 100%;
    vertical-align: middle;
  }
  .login_contain li .text{
    width: 100%;
    height: 100%;
    display: block;
    border: none;
    font-size: 14px;
    padding-left: 5px;
  }
  .login_contain ul{
    padding-bottom: 1.1rem;
  }
  .btn{
    width:100%;
    height: 2.7rem;
    line-height: 2.7rem;
    text-align:center;
    background: #53306c;
    font-size: 1rem;
    color: #fff;
    display: block;
  }
  .footer{
    position: absolute;
    bottom: 0px;
    width: 100%;

  }
  @media only screen and (min-width: 320px) and (max-width: 640px) {
    body,html{
      width:100%;
      height: 100%;
      background: #eaecef;
    }
    .login_main{
      width:90%;
    }
    .login_main2{
      padding: 3.8rem 1.5rem 4rem;
    }
  }
</style>
